<template>
  <div class="list Integral-list">
    <v-navbar></v-navbar>
    <vue-waterfall-easy ref="waterfall" :imgsArr="imgsArr" @scrollReachBottom="_initImgArr"
                        :isRouterLink="isRouterLink">
      <template slot-scope="props">
        <div class="player_info">
          <div class="name">{{props.value.infos[0].goodsName + props.value.infos[0].goodsSpecification}}</div>
          <div class="price now integral-price">
            <span class="num">￥{{props.value.infos[0].marketRetailPrice}}</span>
            <span class="text">已兑换{{props.value.infos[0].salesVolume}}</span>
          </div>
          <div class="price now integral-price">
            <span class="integral-text"><i class="convert"></i>{{props.value.infos[0].needIntegral}}</span>
            <span class="integral-text">库存{{props.value.infos[0].stock}}</span>
          </div>
        </div>
      </template>
      <div slot="waterfall-over">已全部加载</div>
    </vue-waterfall-easy>
    <!--<div class="list-null" v-if="listNull">无内容</div>-->
    <c-search v-if="gosearch"/>
  </div>
</template>

<script>
  import vueWaterfallEasy from 'vue-waterfall-easy'
  import searchBtn from '@c/searchBtn/searchBtn'
  import CountDown from '@c/countDown/countDown'
  import { mapState, mapMutations } from 'vuex'
  import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
  import { getSustemTime, getCurrentTime, doCountDown, countDown } from '@js/until.js'
  import navbar from '@c/navbar/navbar'

  export default {
    name: 'IntegralList',
    data() {
      return {
        imgsArr: [],
        group: 0,
        isRouterLink: true,
        currentTime: 0,
        timer: '',
        sum: 0,
        listNull: false,//列表是否为空
        limit: 10,//列表查询条数
      }
    },
    components: {
      'search-btn': searchBtn,
      vueWaterfallEasy,
      CountDown,
      'v-navbar': navbar,
    },
    computed: {
      ...mapState(['share', 'gosearch']),
    },
    methods: {
      ...mapMutations(['WTITLE', 'RBACK', 'REVISE', 'LOADDING']),
      // 下拉加载数据|获得分类查询数据
      _initImgArr() {
        console.log(22)
        let goodsInfo = {
          offset: this.sum,
          limit: this.limit,
        }
        this.sum += this.limit
        vpost(vlink.convert.list, goodsInfo).then(re => {
          if (re.status === 0) {
            if (re.data.length === 0) {
              this.$refs.waterfall.waterfallOver()
              return
            }
            re.data.forEach(item => {
              item['href'] = '/IntegralDetail?id=' + item.id
              item['src'] = item.goodsLogo === undefined ? 'http://jinanluke.oss-cn-beijing.aliyuncs.com/ePH45w_k.png' : item.goodsLogo
            })
            console.log(re.data)
            this.imgsArr = this.imgsArr.concat(re.data)
          } else {
            this.listNull = true
            this.$Message.warning(re.msg)
          }
        })
      },
      // 监听路由传值是否改变
      _changeRoute() {
        this._initImgArr()
      },
    },
    created() {
      this.WTITLE('积分兑换')
      this.RBACK(false)
      this._changeRoute()
    },
  }
</script>
